import React from "react";
import { useLocation, useNavigate } from "react-router-dom";
import { Card, Space, Tag} from 'antd';
import { useSelector, useDispatch } from "react-redux";
import { closeTagList, setTagActive} from '@store/reducers/MenuSlice'
// 创建组件,使用hooks

// siderMenuKey Array 菜单的keypath 如果是1个则没有子菜单 如果>1则有子菜单
const TagComponents =  () => {
  console.log('state => state.MenuSlice.tagList', useSelector(state => state.MenuSlice.tagList))
  console.log('state => state.MenuSlice.tagList', useSelector(state => state.MenuSlice.tagActice))
  const TagList = useSelector(state => state.MenuSlice.tagList)
  const TagActice = useSelector(state => state.MenuSlice.tagActice)
  const Location = useLocation()
  const Navigate = useNavigate()
  const Dispatch = useDispatch()
  /**
   * @date: 2024-10-09 22:14:40
   * @description: Tag显示
   * @param { Boolean | falg} 当前tag状态
   * @param { Object | item} 当前数据
   * @param { Number | index} 当前索引
   * @modifyContent:
   * @author: Forever丿顾北
  **/
  const setTag = (falg, item, index) => {
    console.log('2', item)
    return (
      falg ?
      <Tag key={item.name} color="#1677ff" closable={item.name !== 'Home'} onClose={() => TagonClose(item, index)}>{item.label}</Tag>:
      <Tag key={item.name} onClick={() => TagonClick(item)}>{item.label}</Tag>
    )
  }
  /**
   * @date: 2024-10-09 10:49:02
   * @description: 关闭标签
   * @modifyContent:
   * @author: Forever丿顾北
  **/
  const TagonClose = (tag,index) => {
    console.log('关闭标签', tag)
    let tagLength = TagList.length - 1
    Dispatch(closeTagList(tag))
    // 不是关闭当前的tag
    if (tag.path !== Location.pathname) {
      return
    }
    // 关闭最后tag
    if (index === tagLength) {
      // 拿到前一位
      const prevTag = TagList[index - 1]
      Dispatch(setTagActive(prevTag))
      // 跳转
      Navigate(prevTag.path)
      sessionStorage.setItem('DefaultSelectedKeys', prevTag.path); // 保存更新后的 tagList 到 sessionStorage
    } else {
      // 点击中间某一个，它要往后移动一位
      if(TagList.length  > 1) {
        // 跳转下一个tag
        const nextTag = TagList[index + 1]
        Dispatch(setTagActive(nextTag))
        // 跳转
        Navigate(nextTag.path)
        sessionStorage.setItem('DefaultSelectedKeys', nextTag.path); // 保存更新后的 tagList 到 sessionStorage
      }
      
    }
  }
  /**
   * @date: 2024-10-09 22:29:09
   * @description: 点击标签
   * @modifyContent:
   * @author: Forever丿顾北
  **/
  const TagonClick = (tag) => {
    console.log('点击标签', tag)
    Dispatch(setTagActive(tag))
    // 跳转
    Navigate(tag.path)
  }
  return (
    <div id="TagComponents">
      <Card hoverable className="Tag_Components_box">
        <Space.Compact direction="horizontal" size="small" className="tag_space">
          {
            TagActice.name && TagList.map((item, index) => setTag(item.path === TagActice.path, item, index))
          }
        </Space.Compact>
      </Card>
    </div>
  );
}

export default TagComponents;